<template>
<!--表单模板管理 -->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input placeholder="请输入名称" v-model="form.name">
        <template slot="prepend">名称</template>
      </el-input>
      <el-input placeholder="请输入描述" v-model="form.explanation">
        <template slot="prepend">描述</template>
      </el-input>
      <el-select v-model="form.mathType" placeholder="选择计分方式" clearable>
        <el-option
          v-for="item in EnumMathTypeList"
          :key="item.code"
          :label="item.name"
          :disabled="item.disabled"
          :value="item.code">
        </el-option>
      </el-select>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;tempQueryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small">添加评价内容</el-button>
      <!-- table -->
      <div class="common_btnBox" >
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <el-table
        :data="tableList"
        border>
        <el-table-column
          label="序号"
          fixed
          width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          min-width="160"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="explanation"
          min-width="180"
          label="描述">
        </el-table-column>
        <el-table-column
          prop="mathTypeName"
          width="100"
          label="计分方式">
        </el-table-column>
        <el-table-column
          prop="createTime"
          width="180"
          label="更新时间">
          <template slot-scope="scope">{{scope.row.updateTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="120">
          <template slot-scope="scope">
            <button class="btn_edit" @click="handleEdit(scope.row)">编辑</button>
            <button class="btn_edit" @click="handleCopy(scope.row)">复制</button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogTitle"
      :visible.sync="isShowDialog"
      :before-close="clearValidate"
      width="1500px">

      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :rules="rules" :model="currentRow" label-width="120px"
               label-suffix="：">

        <el-card class="transfer_view">
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input v-model.trim="currentRow.name" placeholder="输入名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="描述" prop="explanation">
                <el-input v-model.trim="currentRow.explanation" placeholder="输入描述"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-transfer
            filterable
            target-order="push"
            :filter-method="filterMethod"
            filter-placeholder="请输入描述"
            v-model="currentRow.childIdList"
            :props="{
             key: 'id',
             label: 'desc'
             }"
            :data="itemList">
          </el-transfer>
          <el-form-item label="选择计分项" prop="itemList">
            <el-select multiple v-model="currentRow.indexIdList" filterable placeholder="可多选">
              <el-option
                v-for="item in itemList"
                :key="item.id"
                :label="item.desc"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计分方式" prop="mathType">
            <el-select v-model="currentRow.mathType" placeholder="选择计分方式" @change="changeMathType">
              <el-option
                v-for="item in EnumMathTypeList"
                :key="item.code"
                :label="item.name"
                :disabled="item.disabled"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-card>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="clearValidate">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" :disabled="submitStatus"
                   @click="validateForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {querySelectListByLevel, saveOrUpdateTemp, tempQueryList} from '@/services/model/form'

import Format from '@/utils/format'
import {filterEmpty} from '@/services/request'
import Enums from '@/utils/enums'

export default {
  mixins:[Enums],
  data() {
    return {

      form: {
        page: 1,
        pageSize: 10
      },
      rules: {
        name: {required: true, message: '请输入名称'},
      },
      selectModel: 0, // 下拉选择model
      searchModel: '', // 搜索框model
      tableList: [],


      isShowDialog: false, // 是否显示弹窗
      submitStatus: false,
      currentRow: {
        childIdList: []
      }, // 新增数据
      cityModel: '',
      itemList: [],
      limit: 1,
      checked: true,
      EnumContentLevelList: [],
      EnumMathTypeList: [],
      EnumSysBooleanList: [],
    }
  },
  computed: {
    // 弹窗的title
    dialogTitle() {
      return this.currentRow.id ? '编辑模板内容' : '新增模板内容'
    },
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer), 'yyyy-MM-dd hh:mm:ss')
    },
    // 0正常，1锁定
    getStatusBtnMap(type) {
      return type ? '停用' : '启用'
    }
  },
  methods: {
    filterMethod(query, item) {
      return item.desc.indexOf(query) > -1;
    },
    changeMathType(event) {
      this.$forceUpdate()
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.tempQueryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.tempQueryList()
    },
    // 关闭弹窗之前清楚表单校验提示
    clearValidate() {
      this.$refs.form.clearValidate()
      this.isShowDialog = false
    },
    // 表单提交
    validateForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.currentRow = filterEmpty(this.currentRow)
          this.submitData()
        }
      })
    },
    // 新增编辑提交数据
    async submitData() {
      this.submitStatus = true
      // 根据ID判断使用新增还是编辑
      let res = await saveOrUpdateTemp(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.currentRow.id ? '修改成功' : '添加成功'
        })
        this.isShowDialog = false
        this.submitStatus = false
        this.tempQueryList()
      }
      return res
    },
    // 新增数据
    handleAdd() {
      this.currentRow = {
        itemList: [],
        flag: 0,
        repeatFlag: 0,
      }
      this.submitStatus = false
      this.isShowDialog = true
      this.limit = 1
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    handleCopy(row) {
      this.currentRow = {...row, id: ''}
      this.isShowDialog = true
      this.submitStatus = false
      this.limit = 1
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      //一级且为单选或区间的展示表格添加
      if (this.currentRow.level !== 1) {
        this.querySelectListByLevel()
      }
    },
    /**
     * row  当前操作行的对象
     */
    handleEdit(row) {
      this.currentRow = {...row}
      this.isShowDialog = true
      this.submitStatus = false
      this.limit = 1
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      //一级且为单选或区间的展示表格添加
      if (this.currentRow.level !== 1) {
        this.querySelectListByLevel()
      }
    },
    async querySelectListByLevel() {
      let res = await querySelectListByLevel({})
      let itemList = []
      res.data.map(x => {
        itemList.push({
          id: x.id,
          desc: x.name + '(' + x.explanation + ')'
        })
      })
      this.itemList = itemList
    },
    async tempQueryList() {
      let res = await tempQueryList(this.form)
      if (res.code === 200) {
        this.tableList = res.data?.records || []
        this.form.size = Number(res.data?.size)
        this.form.total = Number(res.data?.total)


      }
    }
  },
  mounted() {
    this.querySelectListByLevel()
    this.queryDictList(['EnumMathType'], ['EnumMathTypeList'])
  },
  activated() {
    this.tempQueryList()
    // 获取当前用户的角色列表
  }
}
</script>
<style lang="less">

  .add-tab {
    margin-left: 10px;

    .el-form-item__content {
      margin-left: 0px !important;
    }

    .el-table .cell {
      line-height: 13px !important;
    }

    .el-form-item {
      margin-bottom: 0px;
    }

    .el-button--text {
      color: red;
    }

    .el-table td, .el-table th {
      padding: 5px 0;
      font-size: 13px;
    }

    .el-button {
      padding-right: 10px;
    }
  }

  .user_status {
    &::before {
      content: '';
      margin-right: 6px;
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #969997;
    }

    &.active::before {
      background-color: #0DC26B;
    }
  }

  /deep/ .relate_checkbox {
    .el-checkbox {
      margin-bottom: 30px;

      .el-checkbox__label {
        width: 100px;
      }
    }
  }

  /deep/ .dialog_area {
    .el-dialog__header {
      padding-bottom: 0;
    }
  }

  .item_tag {
    margin-left: 6px;

    &:first-child {
      margin-left: 0;
    }
  }

  .transfer_view{
    padding: 10px 0px;
  }
  .transfer_view .el-transfer-panel {
    width: 455px;
    margin-bottom: 20px;
    margin-top: 10px;
  }

</style>
